<template>
  <div class="article-body">
    <!-- 文章正文内容 -->
    <div class="article-content unified-content">
      <!-- 根据编辑器类型渲染内容 -->
      <!-- Markdown编辑器：使用 MdPreview 组件渲染 -->
      <MdPreview
        v-if="isMarkdownEditor && article.content"
        :model-value="article.content"
        :theme="theme"
        :preview-theme="previewTheme"
        :code-theme="codeTheme"
        :toolbars="[]"
        :scroll-element="scrollElement"
        :show-code-row-number="true"
        :code-copy="true"
        class="markdown-preview"
        @get-catalog="handleCatalog"
        @on-scroll-catalog="handleScrollCatalog"
      />
      <!-- 富文本编辑器：直接显示HTML内容 -->
      <div
        v-else-if="isRichTextEditor && article.htmlContent"
        class="html-content wang-editor-content"
        v-html="article.htmlContent"
      />
      <!-- 备选方案：优先显示Markdown，其次显示HTML -->
      <template v-else>
        <MdPreview
          v-if="article.content"
          :model-value="article.content"
          :theme="theme"
          :preview-theme="previewTheme"
          :code-theme="codeTheme"
          :toolbars="[]"
          :scroll-element="scrollElement"
          :show-code-row-number="true"
          :code-copy="true"
          class="markdown-preview"
          @get-catalog="handleCatalog"
          @on-scroll-catalog="handleScrollCatalog"
        />
        <div
          v-else-if="article.htmlContent"
          class="html-content wang-editor-content"
          v-html="article.htmlContent"
        />
        <!-- 如果两者都没有，显示空状态 -->
        <div v-else class="empty-content">
          <p>暂无内容</p>
        </div>
      </template>
    </div>

    <!-- 返回顶部按钮 -->
    <transition name="back-to-top">
      <div
        v-show="showBackToTop"
        class="back-to-top-button"
        title="返回顶部"
        @click="scrollToTop"
      >
        <svg class="back-to-top-icon" viewBox="0 0 24 24">
          <path
            d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"
            fill="currentColor"
          />
        </svg>
      </div>
    </transition>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted, watch } from "vue";
import {
  UserArticleUtils,
  type UserArticleDetailResponse
} from "@/api/user-article";
import { EditorType } from "@/constants/article";
import { formatImageUrl } from "@/utils/avatar";
import { MdPreview } from "md-editor-v3";
import "md-editor-v3/lib/style.css";
import { useEpThemeStoreHook } from "@/store/modules/epTheme";
// 导入 WangEditor 样式以确保富文本代码块正常显示
import "@wangeditor/editor/dist/css/style.css";

defineOptions({
  name: "ArticleBody"
});

interface Props {
  article: UserArticleDetailResponse;
}

const props = defineProps<Props>();

// 获取主题 store
const epThemeStore = useEpThemeStoreHook();

// 计算编辑器类型相关的属性
const isMarkdownEditor = computed(() => {
  // 如果没有editorTypes字段，则优先判断是否有content字段来确定使用Markdown渲染
  return (
    props.article.editorTypes === EditorType.MARKDOWN ||
    (!props.article.editorTypes && props.article.content)
  );
});

const isRichTextEditor = computed(() => {
  return props.article.editorTypes === EditorType.RICH_TEXT;
});

// 检测是否为暗色模式
const isDarkMode = computed(() => {
  return document.documentElement.classList.contains("dark");
});

// 根据主题动态设置 MdPreview 组件的主题
const theme = computed(() => {
  return isDarkMode.value ? "dark" : "light";
});

// 定义 MdPreview 组件的预览主题和代码高亮主题
const previewTheme = computed<
  "default" | "github" | "vuepress" | "mk-cute" | "smart-blue" | "cyanosis"
>(() => {
  // 根据暗色模式选择合适的预览主题
  return isDarkMode.value ? "github" : "default";
});

const codeTheme = computed<
  | "atom"
  | "a11y"
  | "github"
  | "gradient"
  | "kimbie"
  | "paraiso"
  | "qtcreator"
  | "stackoverflow"
>(() => {
  // 根据暗色模式选择合适的代码高亮主题
  return isDarkMode.value ? "github" : "atom";
});

// 响应式数据
const showBackToTop = ref(false);
const scrollElement = ref<string>("body"); // 滚动容器
const catalogList = ref<any[]>([]); // 目录列表
const activeHeadingId = ref<string>(""); // 当前激活的标题ID

// 目录相关方法
const handleCatalog = (catalog: any[]) => {
  catalogList.value = catalog;
  console.log("📖 获取到文章目录:", catalog);
};

const handleScrollCatalog = (activeId: string) => {
  activeHeadingId.value = activeId;
  console.log("🎯 当前激活标题ID:", activeId);

  // 触发自定义事件，通知目录组件更新活跃状态
  const event = new CustomEvent("article-heading-change", {
    detail: { activeId }
  });
  document.dispatchEvent(event);
};

// 方法

const enhanceContent = () => {
  // 为文章标题添加ID属性，确保目录导航可以正确跳转
  const headings = document.querySelectorAll(
    ".article-content h1, .article-content h2, .article-content h3, .article-content h4, .article-content h5, .article-content h6"
  );
  headings.forEach((heading, index) => {
    // 使用与目录生成相同的ID逻辑
    let id = heading.getAttribute("id");
    if (!id) {
      const text = heading.textContent?.trim() || "";
      id = `heading-${index}-${text.replace(/\s+/g, "-").toLowerCase()}`;
      heading.setAttribute("id", id);
    }

    if (import.meta.env.DEV) {
      console.log(`标题 "${heading.textContent}" 设置ID为: ${id}`);
    }
  });

  // 代码块复制功能已移除，使用 MdPreview 内置功能

  // 为图片添加预览功能和错误处理（包括Markdown和HTML内容）
  const images = document.querySelectorAll(
    ".article-content img, .html-content img"
  );
  images.forEach(img => {
    const imgElement = img as HTMLImageElement;

    // 格式化图片URL确保正确显示
    if (imgElement.src && !imgElement.src.startsWith("data:")) {
      const originalSrc = imgElement.src;
      const formattedSrc = formatImageUrl(originalSrc);
      if (originalSrc !== formattedSrc) {
        imgElement.src = formattedSrc;
        console.log(`🖼️ 格式化文章图片URL: ${originalSrc} -> ${formattedSrc}`);
      }
    }

    // 添加点击预览功能
    imgElement.addEventListener("click", () => previewImage(imgElement));
    imgElement.style.cursor = "pointer";

    // 添加错误处理，防止图片加载失败时无限重试
    imgElement.addEventListener("error", event => {
      const target = event.target as HTMLImageElement;
      if (!target.dataset.errorHandled) {
        target.dataset.errorHandled = "true";
        // 使用占位符图片
        target.src =
          "";
        target.style.cursor = "default";
        // 移除点击事件
        target.removeEventListener("click", () => previewImage(target));
      } else {
        // 如果占位符也失败，隐藏图片
        target.style.display = "none";
      }
    });
  });

  // 为外部链接添加新窗口打开（包括Markdown和HTML内容）
  const links = document.querySelectorAll(
    '.article-content a[href^="http"], .html-content a[href^="http"]'
  );
  links.forEach(link => {
    (link as HTMLAnchorElement).target = "_blank";
    (link as HTMLAnchorElement).rel = "noopener noreferrer";
  });
};

const previewImage = (img: HTMLImageElement) => {
  // 创建图片预览模态框
  const modal = document.createElement("div");
  modal.className = "image-preview-modal";
  modal.innerHTML = `
    <div class="image-preview-backdrop">
      <div class="image-preview-container">
        <img src="${img.src}" alt="${img.alt}" />
        <button class="image-preview-close">&times;</button>
      </div>
    </div>
  `;

  // 添加样式
  const style = document.createElement("style");
  style.textContent = `
    .image-preview-modal {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 10000;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .image-preview-backdrop {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.8);
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .image-preview-container {
      position: relative;
      max-width: 90%;
      max-height: 90%;
    }
    .image-preview-container img {
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
    }
    .image-preview-close {
      position: absolute;
      top: -40px;
      right: 0;
      background: none;
      border: none;
      color: white;
      font-size: 30px;
      cursor: pointer;
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  `;

  document.head.appendChild(style);
  document.body.appendChild(modal);

  // 添加关闭事件
  const closeModal = () => {
    document.body.removeChild(modal);
    document.head.removeChild(style);
  };

  modal
    .querySelector(".image-preview-backdrop")
    ?.addEventListener("click", e => {
      if (e.target === e.currentTarget) {
        closeModal();
      }
    });

  modal
    .querySelector(".image-preview-close")
    ?.addEventListener("click", closeModal);

  // ESC键关闭
  const handleEscKey = (e: KeyboardEvent) => {
    if (e.key === "Escape") {
      closeModal();
      document.removeEventListener("keydown", handleEscKey);
    }
  };

  document.addEventListener("keydown", handleEscKey);
};

// 节流函数
const throttle = (func: Function, limit: number) => {
  let inThrottle: boolean;
  return function (this: any, ...args: any[]) {
    if (!inThrottle) {
      func.apply(this, args);
      inThrottle = true;
      setTimeout(() => (inThrottle = false), limit);
    }
  };
};

// 滚动事件处理
const handleScroll = throttle(() => {
  const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
  // 当滚动距离超过 300px 时显示返回顶部按钮
  showBackToTop.value = scrollTop > 300;
}, 100);

// 返回顶部功能
const scrollToTop = () => {
  window.scrollTo({
    top: 0,
    behavior: "smooth"
  });
};

// 监听暗色模式变化
watch(
  isDarkMode,
  newValue => {
    console.log("🌙 暗色模式状态变化:", newValue ? "暗色" : "亮色");
  },
  { immediate: true }
);

// 生命周期
onMounted(() => {
  // 立即处理内容，确保在目录组件生成之前完成
  setTimeout(() => {
    // 增强内容（包括为标题添加ID）
    enhanceContent();
  }, 50);

  // 添加滚动事件监听器
  window.addEventListener("scroll", handleScroll);

  // 初始检查滚动位置
  handleScroll();
});

onUnmounted(() => {
  // 移除滚动事件监听器
  window.removeEventListener("scroll", handleScroll);

  // 清理可能残留的图片预览模态框
  const modals = document.querySelectorAll(".image-preview-modal");
  modals.forEach(modal => modal.remove());
});
</script>

<style scoped lang="scss">
@use "@/styles/user-theme.scss" as *;

@import url("@/styles/unified-code-styles.css");

// 标题高亮动画
@keyframes highlight-heading {
  0% {
    background-color: rgb(99 102 241 / 20%);
  }

  100% {
    background-color: transparent;
  }
}

/* 移动端适配 - 以iPhone XR为基准 */
@media screen and (width <= 767px) {
  .article-content {
    font-size: 14px !important;
    line-height: 1.6 !important;
  }

  .article-content :deep(h1) {
    margin: 18px 0 10px !important;
    font-size: 20px !important;
  }

  .article-content :deep(h2) {
    margin: 16px 0 8px !important;
    font-size: 18px !important;
  }

  .article-content :deep(h3) {
    margin: 14px 0 8px !important;
    font-size: 16px !important;
  }

  .article-content :deep(h4) {
    margin: 12px 0 6px !important;
    font-size: 15px !important;
  }

  .article-content :deep(h5) {
    margin: 10px 0 6px !important;
    font-size: 14px !important;
  }

  .article-content :deep(h6) {
    margin: 10px 0 6px !important;
    font-size: 13px !important;
  }

  .article-content :deep(p) {
    margin: 10px 0 !important;
    line-height: 1.6 !important;
  }

  .article-content :deep(blockquote) {
    padding: 10px !important;
    margin: 10px 0 !important;
    font-size: 13px !important;
  }

  .article-content :deep(pre) {
    padding: 10px !important;
    margin: 10px 0 !important;
    overflow-x: auto !important;
    border-radius: 6px !important;
  }

  // 移动端代码块样式由统一样式文件处理

  .article-content :deep(table) {
    margin: 10px 0 !important;
    font-size: 12px !important;
  }

  .article-content :deep(th),
  .article-content :deep(td) {
    padding: 6px !important;
  }

  .article-content :deep(ul),
  .article-content :deep(ol) {
    padding-left: 18px !important;
    margin: 10px 0 !important;
  }

  .article-content :deep(li) {
    margin: 4px 0 !important;
    line-height: 1.5 !important;
  }

  // HTML内容移动端适配
  .html-content {
    padding: 12px 0 !important;
    font-size: 14px !important;
    line-height: 1.6 !important;

    h1 {
      margin: 18px 0 10px !important;
      font-size: 20px !important;
    }

    h2 {
      margin: 16px 0 8px !important;
      font-size: 18px !important;
    }

    h3 {
      margin: 14px 0 8px !important;
      font-size: 16px !important;
    }

    h4 {
      margin: 12px 0 6px !important;
      font-size: 15px !important;
    }

    h5 {
      margin: 10px 0 6px !important;
      font-size: 14px !important;
    }

    h6 {
      margin: 10px 0 6px !important;
      font-size: 13px !important;
    }

    p {
      margin: 10px 0 !important;
      line-height: 1.6 !important;
    }

    blockquote {
      padding: 10px !important;
      margin: 10px 0 !important;
      font-size: 13px !important;
    }

    table {
      margin: 10px 0 !important;
      font-size: 12px !important;

      th,
      td {
        padding: 6px !important;
      }
    }

    ul,
    ol {
      padding-left: 18px !important;
      margin: 10px 0 !important;

      li {
        margin: 4px 0 !important;
        line-height: 1.5 !important;
      }
    }

    pre {
      padding: 8px !important;
      margin: 10px 0 !important;
      overflow-x: auto !important;
      font-size: 12px !important;
      line-height: 1.4 !important;
      border-radius: 6px !important;

      > code {
        padding: 0 !important;
        font-size: 12px !important;
      }
    }

    code {
      padding: 2px 4px !important;
      font-size: 0.85em !important;
    }

    // 移动端 WangEditor 代码块特定样式
    pre[class*="language-"],
    pre:not([class]) {
      padding: 8px !important;
      margin: 10px 0 !important;
      font-size: 12px !important;
      line-height: 1.4 !important;
      border-radius: 6px !important;

      code {
        font-size: 12px !important;
      }
    }

    p code,
    li code,
    td code,
    span code {
      padding: 2px 4px !important;
      font-size: 0.85em !important;
    }

    img {
      margin: 8px 0 !important;
      border-radius: 6px !important;
    }
  }

  /* 移动端返回顶部按钮调整 */
  .back-to-top-button {
    right: 16px !important;
    bottom: 80px !important;
    width: 48px !important;
    height: 48px !important;
  }

  .back-to-top-icon {
    width: 22px !important;
    height: 22px !important;
  }
}

/* 小屏手机适配 */
@media screen and (width <= 375px) {
  .article-content {
    font-size: 13px !important;
  }

  .article-content :deep(h1) {
    font-size: 18px !important;
  }

  .article-content :deep(h2) {
    font-size: 16px !important;
  }

  .article-content :deep(h3) {
    font-size: 15px !important;
  }

  .article-content :deep(h4) {
    font-size: 14px !important;
  }

  // 小屏设备代码块样式由统一样式文件处理

  .article-content :deep(table) {
    font-size: 11px !important;
  }

  .article-content :deep(th),
  .article-content :deep(td) {
    padding: 4px !important;
  }

  .back-to-top-button {
    right: 12px !important;
    bottom: 70px !important;
    width: 44px !important;
    height: 44px !important;
  }

  .back-to-top-icon {
    width: 20px !important;
    height: 20px !important;
  }

  // HTML内容小屏适配
  .html-content {
    font-size: 13px !important;

    h1 {
      font-size: 18px !important;
    }

    h2 {
      font-size: 16px !important;
    }

    h3 {
      font-size: 15px !important;
    }

    h4 {
      font-size: 14px !important;
    }

    table {
      font-size: 11px !important;

      th,
      td {
        padding: 4px !important;
      }
    }

    code {
      font-size: 0.8em !important;
    }
  }
}

/* iPhone XR 专用优化 */
@media (width <= 414px) and (height <= 896px) {
  .back-to-top-button {
    right: max(16px, env(safe-area-inset-right)) !important;
    bottom: max(80px, env(safe-area-inset-bottom) + 60px) !important;
    width: 48px !important;
    height: 48px !important;
  }
}

/* MdPreview 组件样式覆盖 */
.markdown-preview {
  z-index: 1;
  width: 100%;

  :deep(.md-editor-toolbar) {
    display: none;
  }

  :deep(.md-editor-preview-wrapper) {
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
  }

  :deep(.md-editor-preview) {
    padding: 0;
    font-size: 16px;
    line-height: 1.8;

    // 亮色模式样式
    color: #333;
    background: transparent;

    // 暗色模式样式
    :global(.dark) & {
      color: #e5e7eb;

      // 暗色模式下的标题颜色
      h1,
      h2,
      h3,
      h4,
      h5,
      h6 {
        color: #f3f4f6 !important;
      }

      // 暗色模式下的链接颜色
      a {
        color: #60a5fa !important;

        &:hover {
          color: #93c5fd !important;
        }
      }

      // 暗色模式下的引用块
      blockquote {
        color: #d1d5db !important;
        background: #374151 !important;
        border-left-color: #60a5fa !important;
      }

      // 暗色模式下的表格
      table {
        border-color: #4b5563 !important;

        th {
          color: #f3f4f6 !important;
          background: #374151 !important;
          border-color: #4b5563 !important;
        }

        td {
          color: #d1d5db !important;
          border-color: #4b5563 !important;
        }

        tr:nth-child(even) td {
          background: #374151 !important;
        }
      }

      // 暗色模式下的行内代码
      code:not(pre code) {
        color: #fbbf24 !important;
        background: #374151 !important;
        border: 1px solid #4b5563 !important;
      }
    }

    // 确保目录锚点高亮样式
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      position: relative;
      scroll-margin-top: 80px; // 为固定头部预留空间

      &:target {
        animation: highlight-heading 2s ease-in-out;
      }
    }
  }
}

.article-body {
  margin-bottom: 32px;
}

.article-content {
  // 富文本代码块CSS变量定义
  --w-e-textarea-slight-bg-color: #f5f5f5;
  --w-e-textarea-slight-border-color: #e5e5e5;

  font-size: 16px;
  line-height: 1.8;
  color: #333;

  // 空状态样式
  .empty-content {
    padding: 40px 20px;
    font-size: 14px;
    color: #999;
    text-align: center;
  }

  // HTML内容的富文本编辑器样式（备选方案）
  .html-content {
    padding: 16px 0;
    // 应用与富文本编辑器相同的样式，确保一致性
    font-size: 16px;
    line-height: 1.6;
    color: #333;

    // 段落样式
    p {
      margin: 0 0 10px;
    }

    // 标题样式
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      margin: 20px 0 10px;
      font-weight: 600;
    }

    h1 {
      font-size: 28px;
    }

    h2 {
      font-size: 24px;
    }

    h3 {
      font-size: 20px;
    }

    h4 {
      font-size: 18px;
    }

    h5 {
      font-size: 16px;
    }

    h6 {
      font-size: 14px;
    }

    // 列表样式
    ul,
    ol {
      padding-left: 20px;
      margin: 10px 0;

      li {
        margin: 5px 0;
      }
    }

    // 引用块样式
    blockquote {
      padding: 10px 15px;
      margin: 15px 0;
      color: #555;
      background: #f0f8ff;
      border-left: 4px solid #1890ff;
    }

    // 表格样式
    table {
      width: 100%;
      margin: 15px 0;
      overflow: hidden;
      border-collapse: collapse;
      border: 1px solid #ddd;
      border-radius: 4px;

      th,
      td {
        padding: 8px 12px;
        text-align: left;
        border: 1px solid #ddd;
      }

      th {
        font-weight: 600;
        background: #f5f5f5;
      }

      tr:nth-child(even) {
        background: #fafafa;
      }
    }

    // 图片样式
    img {
      display: block;
      max-width: 100%;
      height: auto;
      margin: 10px 0;
      margin-right: auto;
      margin-left: auto;
      border-radius: 4px;
      box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
    }

    // 链接样式
    a {
      color: #1890ff;
      text-decoration: none;

      &:hover {
        text-decoration: underline;
      }
    }

    // 代码样式 - 与富文本编辑器保持一致
    code:not(pre code) {
      padding: 3px;
      font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
      font-size: 0.9em;
      color: #333;
      background-color: var(--w-e-textarea-slight-bg-color, #f5f5f5);
      border-radius: 3px;
    }

    // WangEditor 内联代码样式
    code {
      padding: 3px;
      font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
      font-size: 0.9em;
      color: #333;
      background-color: var(--w-e-textarea-slight-bg-color, #f5f5f5);
      border-radius: 3px;
    }

    pre {
      padding: 10px;
      margin: 15px 0;
      overflow: auto;
      font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
      line-height: 1.5;
      text-align: left;
      word-spacing: normal;
      hyphens: none;
      word-break: normal;
      word-wrap: normal;
      tab-size: 4;
      white-space: pre;
      background-color: var(--w-e-textarea-slight-bg-color, #f5f5f5);
      border: 1px solid var(--w-e-textarea-slight-border-color, #e5e5e5);
      border-radius: 4px;

      > code {
        display: block;
        padding: 0;
        font-size: 14px;
        color: inherit;
        text-indent: 0;
        background-color: transparent;
        border: none;
        border-radius: 0;

        // 基本语法高亮样式
        .token.comment,
        .token.prolog,
        .token.doctype,
        .token.cdata {
          color: #708090;
        }

        .token.punctuation {
          color: #999;
        }

        .token.namespace {
          opacity: 0.7;
        }

        .token.property,
        .token.tag,
        .token.boolean,
        .token.number,
        .token.constant,
        .token.symbol,
        .token.deleted {
          color: #905;
        }

        .token.selector,
        .token.attr-name,
        .token.string,
        .token.char,
        .token.builtin,
        .token.inserted {
          color: #690;
        }

        .token.operator,
        .token.entity,
        .token.url,
        .language-css .token.string,
        .style .token.string {
          color: #9a6e3a;
        }

        .token.atrule,
        .token.attr-value,
        .token.keyword {
          color: #07a;
        }

        .token.function,
        .token.class-name {
          color: #dd4a68;
        }

        .token.regex,
        .token.important,
        .token.variable {
          color: #e90;
        }

        .token.important,
        .token.bold {
          font-weight: bold;
        }

        .token.italic {
          font-style: italic;
        }

        .token.entity {
          cursor: help;
        }
      }
    }

    // 为 WangEditor 生成的 HTML 内容添加特定的代码块样式
    // 这些样式需要更高的优先级来覆盖默认样式
    pre[class*="language-"],
    pre:not([class]) {
      padding: 10px !important;
      margin: 15px 0 !important;
      overflow: auto !important;
      font-family:
        Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace !important;
      font-size: 14px !important;
      line-height: 1.5 !important;
      background-color: var(--w-e-textarea-slight-bg-color, #f5f5f5) !important;
      border: 1px solid var(--w-e-textarea-slight-border-color, #e5e5e5) !important;
      border-radius: 4px !important;

      code {
        padding: 0 !important;
        font-family: inherit !important;
        font-size: 14px !important;
        color: inherit !important;
        background-color: transparent !important;
        border: none !important;
        border-radius: 0 !important;
      }
    }

    // 为了确保 WangEditor 生成的内联代码显示正常
    p code,
    li code,
    td code,
    span code {
      padding: 3px !important;
      font-family:
        Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace !important;
      font-size: 0.9em !important;
      color: #333 !important;
      background-color: var(--w-e-textarea-slight-bg-color, #f5f5f5) !important;
      border-radius: 3px !important;
    }

    // 水平分割线
    hr {
      margin: 20px 0;
      border: none;
      border-top: 1px solid #e1e1e1;
    }

    // 暗色模式适配
    :global(.dark) & {
      // 暗色模式下的富文本代码块变量
      --w-e-textarea-slight-bg-color: #1f2937;
      --w-e-textarea-slight-border-color: #4b5563;

      color: #e5e7eb;

      h1,
      h2,
      h3,
      h4,
      h5,
      h6 {
        color: #f3f4f6 !important;
      }

      a {
        color: #60a5fa !important;

        &:hover {
          color: #93c5fd !important;
        }
      }

      blockquote {
        color: #d1d5db !important;
        background: #374151 !important;
        border-left-color: #60a5fa !important;
      }

      table {
        border-color: #4b5563 !important;

        th {
          color: #f3f4f6 !important;
          background: #374151 !important;
          border-color: #4b5563 !important;
        }

        td {
          color: #d1d5db !important;
          border-color: #4b5563 !important;
        }

        tr:nth-child(even) {
          background: #374151 !important;
        }
      }

      code {
        color: #fbbf24 !important;
        background-color: #374151 !important;
      }

      pre {
        background-color: #1f2937 !important;
        border-color: #4b5563 !important;

        > code {
          color: #a9b7c6 !important;
          background-color: transparent !important;

          // 暗色模式下的语法高亮
          .token.comment,
          .token.prolog,
          .token.doctype,
          .token.cdata {
            color: #5c6370 !important;
          }

          .token.punctuation {
            color: #abb2bf !important;
          }

          .token.property,
          .token.tag,
          .token.boolean,
          .token.number,
          .token.constant,
          .token.symbol,
          .token.deleted {
            color: #d19a66 !important;
          }

          .token.selector,
          .token.attr-name,
          .token.string,
          .token.char,
          .token.builtin,
          .token.inserted {
            color: #98c379 !important;
          }

          .token.operator,
          .token.entity,
          .token.url,
          .language-css .token.string,
          .style .token.string {
            color: #56b6c2 !important;
          }

          .token.atrule,
          .token.attr-value,
          .token.keyword {
            color: #c678dd !important;
          }

          .token.function,
          .token.class-name {
            color: #61afef !important;
          }

          .token.regex,
          .token.important,
          .token.variable {
            color: #e06c75 !important;
          }
        }
      }

      hr {
        border-top-color: #4b5563 !important;
      }
    }
  }

  // 暗色模式下的 WangEditor 特定样式
  pre[class*="language-"],
  pre:not([class]) {
    color: #a9b7c6 !important;
    background-color: #1f2937 !important;
    border-color: #4b5563 !important;

    code {
      color: #a9b7c6 !important;
    }
  }

  // 暗色模式下的内联代码
  p code,
  li code,
  td code,
  span code {
    color: #fbbf24 !important;
    background-color: #374151 !important;
  }
}

// 专门针对 WangEditor 生成的内容的样式
.wang-editor-content {
  // 强制覆盖代码块样式
  :deep(pre) {
    padding: 10px !important;
    margin: 15px 0 !important;
    overflow: auto !important;
    font-family:
      Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    color: #333 !important;
    background-color: var(--w-e-textarea-slight-bg-color, #f5f5f5) !important;
    border: 1px solid var(--w-e-textarea-slight-border-color, #e5e5e5) !important;
    border-radius: 4px !important;

    code {
      padding: 0 !important;
      font-family: inherit !important;
      font-size: 14px !important;
      color: inherit !important;
      background-color: transparent !important;
      border: none !important;
      border-radius: 0 !important;
    }
  }

  // 内联代码样式
  :deep(code:not(pre code)) {
    padding: 3px !important;
    font-family:
      Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace !important;
    font-size: 0.9em !important;
    color: #333 !important;
    background-color: var(--w-e-textarea-slight-bg-color, #f5f5f5) !important;
    border-radius: 3px !important;
  }

  // 暗色模式适配
  :global(.dark) & {
    :deep(pre) {
      color: #a9b7c6 !important;
      background-color: #1f2937 !important;
      border-color: #4b5563 !important;

      code {
        color: #a9b7c6 !important;
      }
    }

    :deep(code:not(pre code)) {
      color: #fbbf24 !important;
      background-color: #374151 !important;
    }
  }
}

/* 文章内容样式 */
.article-content :deep(h1),
.article-content :deep(h2),
.article-content :deep(h3),
.article-content :deep(h4),
.article-content :deep(h5),
.article-content :deep(h6) {
  margin: 24px 0 16px;
  font-weight: 600;
  line-height: 1.4;
  color: #333;
}

.article-content :deep(h1) {
  font-size: 24px;
}

.article-content :deep(h2) {
  font-size: 22px;
}

.article-content :deep(h3) {
  font-size: 20px;
}

.article-content :deep(h4) {
  font-size: 18px;
}

.article-content :deep(h5) {
  font-size: 16px;
}

.article-content :deep(h6) {
  font-size: 14px;
}

.article-content :deep(p) {
  margin: 16px 0;
  line-height: 1.8;
}

.article-content :deep(blockquote) {
  padding: 16px;
  margin: 16px 0;
  background: #f8f9fa;
  border-left: 4px solid #409eff;
  border-radius: 4px;
}

// 使用统一的代码块样式（通过 unified-content 类应用）

.article-content :deep(img) {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 16px 0;
  margin-right: auto;
  margin-left: auto;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
}

.article-content :deep(table) {
  width: 100%;
  margin: 16px 0;
  overflow: hidden;
  border-collapse: collapse;
  border: 1px solid #e1e4e8;
  border-radius: 8px;
}

.article-content :deep(th),
.article-content :deep(td) {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid #e1e4e8;
}

.article-content :deep(th) {
  font-weight: 600;
  background: #f6f8fa;
}

.article-content :deep(ul),
.article-content :deep(ol) {
  padding-left: 24px;
  margin: 16px 0;
}

.article-content :deep(li) {
  margin: 8px 0;
  line-height: 1.6;
}

.article-content :deep(a) {
  color: #409eff;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s;
}

.article-content :deep(a:hover) {
  border-bottom-color: #409eff;
}

/* 返回顶部按钮样式 */
.back-to-top-button {
  position: fixed;
  right: 30px;
  bottom: 60px;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  cursor: pointer;
  background: #409eff;
  border-radius: 50%;
  box-shadow: 0 4px 12px rgb(64 158 255 / 30%);
  transition: all 0.3s ease;
}

.back-to-top-button:hover {
  background: #337ecc;
  box-shadow: 0 6px 16px rgb(64 158 255 / 40%);
  transform: translateY(-2px);
}

.back-to-top-button:active {
  box-shadow: 0 2px 8px rgb(64 158 255 / 30%);
  transform: translateY(0);
}

.back-to-top-icon {
  width: 24px;
  height: 24px;
  color: white;
}

/* 返回顶部按钮动画 */
.back-to-top-enter-active,
.back-to-top-leave-active {
  transition: all 0.3s ease;
}

.back-to-top-enter-from,
.back-to-top-leave-to {
  opacity: 0;
  transform: translateY(20px) scale(0.8);
}

.back-to-top-enter-to,
.back-to-top-leave-from {
  opacity: 1;
  transform: translateY(0) scale(1);
}
</style>
